<template>
	<view class="body-view">
		<view class="info-table">
			<view class="grace-padding">
				<view class="uni-textarea">
					<textarea maxlength="500" auto-focus placeholder-style="color:#6b6b6b" v-model="inputValue" placeholder="今天你发布动态了吗？" />
					</view>
			</view>
			 
		</view>
		<view class="uploads">
			<!-- 图片上传 -->
			<view class='upload-image-view'>
				
				<block v-for="(image,index) in imageList" :key="index">
					<view class='image-view'>
						<image :src="image" :data-src="image" @tap="previewImage"></image>
						<view class='del-btn' :data-index="index" @tap='deleteImage'>
							<view class='baicha'></view>
						</view>
					</view>
				</block>
				<view class='add-view' v-if="imageList.length < imageLength" @tap="chooseImage">

					<!-- 相机 -->
					<!-- <view class="xiangji">
							<view class="tixing"></view>
							<view class='changfx'>
								<view class='yuan1'>
									<view class='yuan2'></view>
								</view>
							</view>
						</view> -->

					<!-- 十字架 -->
					<view class="cross">
						<view class="transverse-line"></view>
						<view class="vertical-line"></view>
					</view>

				</view>
				<!-- <view class='info'>上传图片，不超过{{imageLength}}张。</view> -->
			</view>
			<!-- 图片上传 -->
		</view>
		<view class="grace-news-list-title-main">
			<text class="main-topic" @click="selectTopic()">#{{topic.topicId==undefined?'选择话题':topic.topicTitle}}#</text>
		</view>
		
		<!-- 资源卡片 -->
		<view v-if="shareObj.id!=undefined" style="width:94%;">
			
			<view class="grace-news-list-items" style="width:94%; padding:5px 3%;">
				<image :src="shareObj.cover==''?'../../../static/l2.png':serverUrl+shareObj.cover" class="grace-news-list-img grace-list-imgs-l" mode="widthFix"></image>
				<view class="grace-news-list-title">
					<view class="grace-news-list-title-main">{{shareObj.title}}</view>
					<text class="grace-news-list-title-desc grace-text-overflow">{{shareObj.author}}{{shareObj.create_time_str}}</text>
				</view>
			</view>
			
		</view>
		
		
		<view class="v-location" @click="chooseLoc()">
			<image src="../../../static/weizhi.png" />
			{{addressName}}
		</view>
		<view class="table-btn-view">
			<button class="save-btn" @click="publishSocial">发布动态</button>
		</view>
	</view>
</template>

<script>
	import amap from '../../../common/amap-wx.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';	
		
	var sourceType = [
		['camera'], //拍照
		['album'], //相册
		['camera', 'album'] //拍照或相册
	]
	var sizeType = [
		['compressed'], //压缩
		['original'], //原图
		['compressed', 'original'] //压缩或原图
	]
	export default {
		computed: {
			...mapState(['userInfo','topic'])
		},
		data() {
			return {
				serverUrl: this.serverUrl,
				imageList: [], //保存图片路径集合
				imageLength: 4, //限制图片张数
				sourceTypeIndex: 2, //添加方式限制
				sizeTypeIndex: 2, //图片尺寸限制
				inputValue: "",
				uploadFilePath: "",
				amapPlugin: null,
				key: '769c121d68f1e86c2244e80542dd114f',
				addressName: '',
				shareObj: {}
			}
		}, 
		onLoad(e) {
			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			this.getRegeo();
			if(e.shareObj!=undefined){
				this.shareObj = JSON.parse(decodeURIComponent(e.shareObj));
			}
		},
		onUnload() {
			this.setTopic({});
		},
		methods: {
			...mapMutations(['setTopic']),
			getRegeo() {
				//uni.showLoading({title: '获取信息中'});
				this.amapPlugin.getRegeo({
					success: (data) => {
						this.addressName = data[0].name;
						//uni.hideLoading();
					}
				});
			},
			chooseLoc(){
				var that = this;
				uni.chooseLocation({
					success: function (res) {
						that.addressName = res.name;
					}
				});
			},
			publishSocial() {
					if (this.inputValue.length < 1) {
						uni.showToast({
							title: "请输入内容",
							icon: "none",
						});
					} else {
						 uni.showLoading({});
						if (this.imageList.length > 0) {
							this.uploadFiles();
						} else{
							this.publishSub();
						}
					}
		},
		publishSub() {
			var data = {
				username: this.userInfo.username,
				createLocation: this.addressName,
				topicId:this.topic.topicId==undefined?"":this.topic.topicId,
				resourceId: this.shareObj.id==undefined?"":this.shareObj.id,
				submitImages: this.uploadFilePath,
				content: this.inputValue
			};
			uni.request({
				url: this.serverUrl + 'user-api/saveSocialMain',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				data: data,
				method: "POST",
				success: (r) => {
					//console.log(r);
					if (r.data.code == '000000') {
						uni.switchTab({
							url:"/pages/tab-bar/social/social",
							success(e) {
								var page = getCurrentPages().pop(); 
								if (page == undefined || page == null) return; 
								page.onLoad(); 
							}
						})
					} else {
						uni.showToast({
							title: r.data.message
						});
					}
				},
				fail: (data, code) => {
					console.log('fail' + JSON.stringify(data));
				},
				complete: (r) => {
					uni.hideLoading();
					this.setTopic({});
				}
			})
		},
		uploadFiles(f) {
			var i=f?f:0;
			uni.uploadFile({
				url: this.serverUrl + 'user-api/uploadFile',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				filePath: this.imageList[i],
				name: 'file',
				method: "POST",
				formData: {
					username: "",
				},
				success: (r) => {
					var rdata = JSON.parse(r.data);
					this.uploadFilePath += rdata.data.result +";";
				},
				fail: (r) => {
					uni.showToast({
						title:"上传失败",
					})
				},
				complete: (r) => {
					i++;
					if(i==this.imageList.length){ 
						this.uploadFilePath = this.uploadFilePath.substring(0,this.uploadFilePath.length-1);
						this.publishSub();
					}else{
						f=i;
						this.uploadFiles(f);
					}									
				}
			});			
		},

			//选择图片
			chooseImage: async function() {
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					// #ifdef MP-WEIXIN
					sizeType: sizeType[this.sizeTypeIndex],
					// #endif
					count: this.imageLength - this.imageList.length,
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					}
				})
			},
			//预览图片#
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			//删除图片
			deleteImage: function(e) {
				var index = e.target.dataset.index;
				var that = this;
				var images = that.imageList;
				images.splice(index, 1);
				that.imageList = images;
			},
			selectTopic(){
				uni.navigateTo({
					url: '../../social/topic-list/topic-list',
				})
			}
		}
	}
</script>

<style>
	@import "../../../common/upload-imgs.css";

	page {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		background-color: #FFFFFF;
	}

	.body-view {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}

	.info-table {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		background-color: #FFFFFF;
	}

	.table-btn-view {
		/* position: fixed;
		bottom: 27upx; */
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table-btn-view .save-btn {
		margin-top: 10upx;
		width: 92%;
		height: 90upx;
		line-height: 90upx;
		background: rgba(0, 170, 255, 1);
		border-radius: 10upx;
		color: #FFFFFF;
	}

	.uploads {
		width: 92%;
	}

	.grace-nowrap image {
		width: 80upx;
		padding: 20upx 50upx;
	}

	.uni-textarea textarea {
		font-size: 30upx;
	}
	
	.upload-image-view {
		margin: 0;
	}
	.v-location {
		width: 64upx;
		height: 64upx;
		line-height:64upx;
		width:90%;
		display: flex;
		align-items:center;
	}
	.v-location image {
		width: 64upx;
		height: 64upx;
	}
	.main-topic {
		color: #1874CD;
		margin: 0 35upx;
	}
	
	.grace-news-list-items {
		background-color: #F6F7F8;
	}
	.grace-news-list-items .grace-news-list-img {
		width: 120upx;
		height:125rpx;
	}
	
</style>
